<template>
  <div class="cash-coupon">
    <div class="card-box" v-for="(item, index) in couponList" :key="index">
      <div class="card-left">
        <div class="left-top">
          <span class="num">{{ item.money }}</span>
          <span class="bif">USDT</span>
        </div>
        <div class="left-bot">
          <span class="bot-time">领取时间:</span>
          <span>{{ getTimeFormat(item.add_time) }}</span>
        </div>
      </div>
      <div class="card-right">
        <div class="right-btn" @click="toUse(item)">立即使用</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import req from "@/libs/req";
import {ref, onMounted} from "vue";
import {useRouter} from 'vue-router';
import {dateFormat} from '@/libs/utlis';

const router = useRouter();
const couponList = ref([]);

// 点击立即使用
const toUse = (item) => {
  window.localStorage.setItem('couponValue', JSON.stringify(item));
  router.back();
}
// 设置时间格式
const getTimeFormat = (num) => {
  const str = dateFormat('YYYY/mm/dd HH:MM', num);
  return str;
}
// 获取可用现金券
const getCoupon = async (money) => {
  const res = await req.post('Pledge/getCoupon');
  if (res.length > 0) {
    couponList.value = res;
  }
}

onMounted(() => {
  getCoupon();
})
</script>
<style scoped lang="scss">
.cash-coupon {
  padding-top: 16px;
  min-height: 100vh;

  .card-box {
    background: linear-gradient(0deg, #EBFC8C 0%, #ACEAA7 100%);
    border-radius: 10px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 0 15px 15px 15px;
    padding: 36px 18px 20px;

    .card-left {
      display: flex;
      flex-direction: column;

      .left-top {
        display: flex;
        align-items: end;
        margin-bottom: 25px;

        .num {
          font-size: 50px;
          font-weight: 700;
          color: #F7AC15;
          margin-right: 6px;
          margin-bottom: -10px;
        }

        .bif {
          font-size: 15px;
          color: #F7AC15;
        }
      }

      .left-bot {
        font-size: 12px;
        color: #999;

        .bot-time {
          margin-right: 8px;
        }
      }
    }

    .card-right {
      margin-bottom: 18px;

      .right-btn {
        font-size: 12px;
        color: #000;
        padding: 6px 10px;
        border-radius: 30px;
        border: 1px solid #000000;
      }
    }
  }
}
</style>